<template>
  <el-dialog title="批量备注" :visible.sync="$attrs.visableIf" @close="handleCloseDialog" :close-on-click-modal="false" :close-on-press-escape="false" append-to-body width="700px">
    <el-form ref="form" :rules="rules" :model="form" label-width="120px" size="small">
      <el-form-item label="批量备注方式：" prop="type">
        <el-radio-group v-model="form.type">
          <el-radio :label="0">统一修改</el-radio>
          <el-radio :label="1">关键词替换</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="form.type==0" label="备注内容：" prop="remarks">
        <EditorPro ref="editorProntent" :toolTags="tags" hideEmoji hideImageBtn hideVideoBtn hideImageText hideMini havecopy :options="{ placeholder: '请输入内容'}"/>
        <div class="tips-content">
          <p>举例：当前备注为“小明妈妈”</p>
          <p>统一修改为：<span class="tags">当前备注</span> - <span class="tags">性别</span> - <span class="tags">添加日期</span> - 数学</p>
          <p><strong>修改后：小明妈妈-女-210518-数学</strong></p>
          <p>1. 变量间如需分隔符请自行设置</p>
          <p>2. 在已有备注基础上增加信息，可选择“当前备注”添加其他属性。</p>
          <p>3. 超出20字的部分无法显示</p>
        </div>
      </el-form-item>
      <template v-if="form.type==1">
        <el-form-item label="关键词：" prop="keyword">
          <el-input type="text" placeholder="限20字" v-model="form.keyword" maxlength="20" show-word-limit>
          </el-input>
        </el-form-item>
        <el-form-item label="替换为：" prop="replace">
          <el-input type="text" placeholder="限20字" v-model="form.replace" maxlength="20" show-word-limit>
          </el-input>
          <div class="tips-content">
            <p>举例：当前备注为 “小明妈妈-20级数学班”</p>
            <p>将 “20” 替换为 “21”。</p>
            <p><strong>修改后：小明妈妈-21级数学班</strong></p>
            <p>1. 变量间如需分隔符请自行设置</p>
            <p>1. 若备注中不包含关键词，将不进行修改；</p>
            <p>2. 超出20字的部分无法显示。</p>
          </div>
        </el-form-item>

      </template>

    </el-form>
    <div class="footer-btn" slot="footer">
      <el-button type="primary" @click="handleCloseDialog">取消</el-button>
      <el-button @click="onSubmit('form')">提交</el-button>
    </div>
  </el-dialog>
</template>

<script>


import EditorPro from "@/components/EditorPro/index.vue";

export default {
  name: 'addLabelGroup',
  components: {
    EditorPro
  },
  data() {
    return {
      form: {
        type: 0, //类型
        remarks: null,//备注内容
        keyword: null,//关键词
        replace:null,//替换为
      },
      tags: [
        {text: '微信昵称', label: 'nickname'},
        {text: '当前备注', label: 'mobile'},
        {text: '性别', label: 'gender'},
        {text: '添加日期', label: 'adddate'},
      ],
      rules: {
        'remarks': [
          {required: true, message: '请输入备注', trigger: 'blur'}
        ],
        'keyword': [
          {required: true, message: '请输入关键词', trigger: 'blur'}
        ],

      },
    }
  },
  created() {
  },
  mounted() {
  },
  watch: {},
  methods: {
    getDelLabel(index) {
      this.form.labelList.splice(index, 1)
    },
    addLabel() {
      this.form.labelList.push({name: ''});
    },
    onSubmit(formName) {
      //提交的代码
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log('提交表单');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    handleCloseDialog() {
      this.$emit('update:visableIf', false);
      this.$emit('handleQuery');
    }
  }
}
</script>

<style scoped lang="scss">
.footer-btn {
  display: flex;
  justify-content: flex-end;
}
::v-deep .el-dialog__body {
  max-height: 600px;
  overflow-y: auto;
}
.tips-content {
  color: #000;
  font-size: 14px;
  padding: 8px 15px;
  border-radius: 4px;
  background-color: #fffbe6;
  border: 1px solid #ffe58f;
  margin-top: 25px;

  p {
    line-height: 1.5715;

    .tags {

      display: inline-block;
      padding: 0px 8px;
      background: #eff2fe;
      border-radius: 2px;
      border: 1px solid #d5ddfb;
      height: 25px;
      line-height: 25px;
    }
  }
}
</style>
